<!--
 * @Description: 块级元素
 * @Author: zzj
 * @Date: 2021-09-21 19:08:56
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-21 19:30:58
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>block</title>
    <style>
        h1{
            margin: 0;
            font-size: 16px;
            font-weight: normal;
        }
        p {
            margin: 0;
        }
        ul,ol,dl{
            margin: 0;
            padding: 0;
            margin-left: 3em;
            list-style: none;
        }
        dl > dd{
            display: none;
        }
        dl > dt:hover ~dd{
            display: block;
        }
    </style>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <input type="text">
    <p>这是一个段落</p>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
    </ol>
    <dl>
        <dt>三年级</dt>
        <dd>1班</dd>
        <dd>2班</dd>
        <dd>3班</dd>
        <dt>四年级</dt>
        <dd>1班</dd>
        <dd>2班</dd>
        <dd>3班</dd>
        <dt>五年级</dt>
        <dd>1班</dd>
        <dd>2班</dd>
        <dd>3班</dd>
    </dl>

    <div>
        this is divthis is divthis is divthis is divthis is divthis is divthis is divthis is div
    </div>
</body>
</html>